
<!-- 参与活动模态框 -->
<div class="modal fade" id="participateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择文章参与投票活动</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p style="margin-bottom: 1.5rem; color: var(--text-secondary);">
                    请选择您在2023年1月1日至2023年10月31日期间发布的原创科技类文章，最多可选择3篇参与本次评选。</p>

                <div class="my-articles-list">
                    <div class="my-article-item selected">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox" checked>
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">人工智能在医疗影像诊断中的应用与挑战</div>
                            <div class="my-article-date">发布于 2023-09-10</div>
                        </div>
                    </div>

                    <div class="my-article-item selected">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox" checked>
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">深度学习模型的优化方法与实践指南</div>
                            <div class="my-article-date">发布于 2023-07-25</div>
                        </div>
                    </div>

                    <div class="my-article-item">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox">
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">大语言模型的发展历程与未来趋势</div>
                            <div class="my-article-date">发布于 2023-10-05</div>
                        </div>
                    </div>

                    <div class="my-article-item">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox">
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">计算机视觉技术在自动驾驶中的应用</div>
                            <div class="my-article-date">发布于 2023-06-18</div>
                        </div>
                    </div>
                </div>

                <!-- 如果没有文章可选择，显示以下内容 -->
                <!-- <div class="no-articles">
                    <i class="far fa-file-alt"></i>
                    <h4>您暂无符合条件的文章</h4>
                    <p>请发布符合要求的原创科技类文章后再参与活动</p>
                    <a href="#" class="create-new-link">
                        <i class="fas fa-plus-circle"></i> 发布新文章
                    </a>
                </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitArticles">确认提交</button>
            </div>
        </div>
    </div>
</div>



<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 视图切换功能
		const viewButtons = document.querySelectorAll('.view-btn');
		const views = {
			list: document.getElementById('list-view'),
			grid: document.getElementById('grid-view'),
			summary: document.getElementById('summary-view')
		};

		viewButtons.forEach(button => {
			button.addEventListener('click', function () {
				// 更新按钮状态
				viewButtons.forEach(btn => btn.classList.remove('active'));
				this.classList.add('active');

				// 显示选中的视图，隐藏其他视图
				const viewType = this.getAttribute('data-view');
				for (const key in views) {
					views[key].style.display = key === viewType ? 'flex' : 'none';
				}

				// 模拟AJAX记录用户偏好
				simulateAjax({
					url: '/api/user-preferences',
					method: 'POST',
					data: {
						preference: 'article_view',
						value: viewType
					},
					success: function (response) {
						console.log(`已将视图偏好设置为${viewType}`, response);
					}
				});
			});
		});

		// 倒计时功能
		function updateCountdown() {
			// 目标日期：2023年11月30日
			const targetDate = new Date('2030-11-30T23:59:59');
			const now = new Date();
			const diff = targetDate - now;

			console.log(diff)
			if (diff <= 0) {
				document.getElementById('days').textContent = '00';
				document.getElementById('hours').textContent = '00';
				document.getElementById('minutes').textContent = '00';
				document.getElementById('seconds').textContent = '00';
				return;
			}

			const days = Math.floor(diff / (1000 * 60 * 60 * 24));
			const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((diff % (1000 * 60)) / 1000);

			document.getElementById('days').textContent = days.toString().padStart(2, '0');
			document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
			document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
			document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
		}

		// 初始化倒计时
		updateCountdown();
		// 每秒更新一次
		setInterval(updateCountdown, 1000);

		// 投票功能
		const voteButtons = document.querySelectorAll('.vote-btn:not(.voted)');
		voteButtons.forEach(button => {
			button.addEventListener('click', function () {
				const articleCard = this.closest('.article-card');
				const votesCount = articleCard.querySelector('.votes-count');
				const currentVotes = parseInt(votesCount.textContent);

				// 更新票数
				votesCount.textContent = currentVotes + 1;

				// 更改按钮状态
				this.classList.add('voted');
				this.innerHTML = '<i class="fas fa-check"></i> 已投票';

				// 模拟AJAX请求
				simulateAjax({
					url: '/api/vote',
					method: 'POST',
					data: {
						articleId: articleCard.dataset.id || Math.random().toString(36).substr(2, 9),
						userId: 'current_user_id'
					},
					success: function (response) {
						console.log('投票成功:', response);
					}
				});
			});
		});

		// 文章选择功能
		const articleItems = document.querySelectorAll('.my-article-item');
		articleItems.forEach(item => {
			const checkbox = item.querySelector('.form-check-input');

			item.addEventListener('click', function (e) {
				// 如果点击的是复选框本身，则不处理，避免重复触发
				if (e.target === checkbox) return;

				checkbox.checked = !checkbox.checked;
				updateArticleSelection();
			});

			checkbox.addEventListener('change', updateArticleSelection);
		});

		// 更新文章选择状态
		function updateArticleSelection() {
			const checkboxes = document.querySelectorAll('.my-article-item .form-check-input:checked');
			const articleItems = document.querySelectorAll('.my-article-item');

			// 更新选中状态样式
			articleItems.forEach(item => {
				const checkbox = item.querySelector('.form-check-input');
				if (checkbox.checked) {
					item.classList.add('selected');
				} else {
					item.classList.remove('selected');
				}
			});

			// 限制最多选择3篇文章
			if (checkboxes.length >= 3) {
				const uncheckedCheckboxes = document.querySelectorAll('.my-article-item .form-check-input:not(:checked)');
				uncheckedCheckboxes.forEach(checkbox => {
					checkbox.disabled = true;
				});
			} else {
				const allCheckboxes = document.querySelectorAll('.my-article-item .form-check-input');
				allCheckboxes.forEach(checkbox => {
					checkbox.disabled = false;
				});
			}
		}

		// 提交文章参与活动
		document.getElementById('submitArticles').addEventListener('click', function () {
			const checkboxes = document.querySelectorAll('.my-article-item .form-check-input:checked');

			if (checkboxes.length === 0) {
				alert('请至少选择一篇文章参与活动');
				return;
			}

			// 收集选中的文章ID
			const selectedArticles = [];
			checkboxes.forEach(checkbox => {
				const articleItem = checkbox.closest('.my-article-item');
				const articleTitle = articleItem.querySelector('.my-article-title').textContent;
				// 在实际应用中，这里应该获取文章的ID
				selectedArticles.push({
					id: Math.random().toString(36).substr(2, 9),
					title: articleTitle
				});
			});

			// 模拟AJAX提交
			simulateAjax({
				url: '/api/participate',
				method: 'POST',
				data: {
					eventId: '2023_best_tech_article',
					userId: 'current_user_id',
					articles: selectedArticles.map(article => article.id)
				},
				success: function (response) {
					console.log('提交成功:', response);

					// 关闭模态框
					const modal = bootstrap.Modal.getInstance(document.getElementById('participateModal'));
					modal.hide();

					// 显示成功消息
					alert(`成功提交 ${selectedArticles.length} 篇文章参与活动！`);
				},
				error: function (error) {
					console.error('提交失败:', error);
					alert('提交失败，请稍后重试');
				}
			});
		});

		// 分页功能
		const pageBtns = document.querySelectorAll('.page-btn:not(.disabled)');
		pageBtns.forEach(btn => {
			if (!btn.querySelector('i')) { // 不是箭头按钮
				btn.addEventListener('click', function () {
					pageBtns.forEach(b => b.classList.remove('active'));
					this.classList.add('active');

					// 模拟加载新页面内容
					simulateAjax({
						url: '/api/articles',
						method: 'GET',
						data: {
							page: this.textContent,
							sort: document.querySelector('.sort-select').value,
							view: document.querySelector('.view-btn.active').getAttribute('data-view')
						},
						success: function (response) {
							console.log(`加载第${this.textContent}页内容成功`, response);
							// 在实际应用中，这里会更新文章列表
						}
					});
				})
			}
		});

		// 搜索功能
		const searchInput = document.querySelector('.search-input');
		searchInput.addEventListener('keyup', function (e) {
			// 按Enter键搜索
			if (e.key === 'Enter') {
				const searchTerm = this.value.trim();
				if (searchTerm) {
					// 模拟搜索请求
					simulateAjax({
						url: '/api/search',
						method: 'GET',
						data: {
							query: searchTerm,
							view: document.querySelector('.view-btn.active').getAttribute('data-view')
						},
						success: function (response) {
							console.log(`搜索"${searchTerm}"成功`, response);
							// 在实际应用中，这里会更新文章列表
						}
					});
				}
			}
		});

		// 排序功能
		const sortSelect = document.querySelector('.sort-select');
		sortSelect.addEventListener('change', function () {
			// 模拟排序请求
			simulateAjax({
				url: '/api/articles',
				method: 'GET',
				data: {
					sort: this.value,
					page: 1,
					view: document.querySelector('.view-btn.active').getAttribute('data-view')
				},
				success: function (response) {
					console.log(`按${this.value}排序成功`, response);
					// 在实际应用中，这里会更新文章列表
				}
			});
		});

		// 模拟AJAX请求的函数
		function simulateAjax(options) {
			console.log('发送AJAX请求:', options);

			// 模拟网络延迟
			setTimeout(() => {
				if (options.success) {
					options.success({
						status: 'success',
						message: '操作成功',
						data: {
							timestamp: new Date().getTime()
						}
					});
				}
			}, 800);
		}
	});
</script>

